<template>
  <el-form ref="postForm" :model="postForm" :rules="rules">
    <div class="shopListSave">
      <el-form-item label="角色名称" prop="name" style="width:500px">
        <el-input v-model.trim="postForm.name" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="postForm.status">
          <el-radio :label="1">激活</el-radio>
          <el-radio :label="0">冻结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" style="width:500px">
        <el-input v-model="postForm.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" />
      </el-form-item>
      <el-form-item label="菜单权限">
        <el-checkbox v-model="allSelect" true-label="true">{{allSelect?'全选':'全不选'}}</el-checkbox>
        <el-table :data="list" border fit highlight-current-row style="width: 100%;">
          <!-- <el-table-column label="序号" type="index" align="center" width="60px" /> -->
          <el-table-column label="菜单名称" width="220px">
            <template slot-scope="{row}">
              <el-checkbox @change="boxChange(row.id)" v-model="parentChecks[row.id]" true-label="true">{{row.name}}
              </el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="功能操作">
            <template slot-scope="{row}">
              <el-checkbox-group v-model="childrenChecks[row.id]">
                <el-checkbox v-for="item in row.children" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit" >确定</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import { roleSave, roleGetById, getPermissionMenu } from '@/api/system'
const defaultForm = {
  id: 0,
  identifier: '',
  menuIds: '',
  name: '',
  remark: '',
  status: 1,
}
export default {
  name: 'ShopListSave',
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      rules: {
        image: [{ required: true, message: '请选择', trigger: 'blur' }],
        type: [{ required: true, message: '请选择', trigger: 'blur' }],
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        viceName: [{ required: true, message: '请输入', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入图文详情', trigger: 'blur' }],
      },
      list: [],
      parentChecks: {},
      childrenChecks: {},
      allSelect: false
    }
  },
  watch: {
    allSelect(val) {
      if (this.list && this.list.length > 0) {
        this.list.forEach(element => {
          this.parentChecks[element.id] = val
          this.boxChange(element.id)
        });
      }
    }
  },
  created() {
    this.getMenus()
  },
  methods: {
    getMenus() {
      getPermissionMenu().then(res => {
        this.list = res
        for (let item of res) {
          this.$set(this.parentChecks, item.id, '')
          this.$set(this.childrenChecks, item.id, [])
        }
        let id = this.$route.query.id
        if (id) {
          this.getInfo(id)
        }
      })
    },
    getInfo(id) {
      roleGetById({ id }).then(res => {
        this.postForm = res
        this.postForm.menuTree.map(item => {
          let key = item.id
          let arr = item.children && item.children.filter(item => {
            return item.isCheck > 0
          }).map(mItem => {
            return parseInt(mItem.id)
          })
          this.$set(this.parentChecks, key, item.isCheck > 0)
          this.$set(this.childrenChecks, key, arr)
        })
      })
    },
    combineMenuId() {
      let arr = []
      for (let index in this.parentChecks) {
        let item = this.parentChecks[index]
        if (!item) continue
        let arr2 = [index]
        let child = this.childrenChecks[index]
        if (child && child.length > 0) {
          arr2 = arr2.concat(child)
        }
        arr.push(arr2.join(','))
      }
      return arr.join(',')
    },
    boxChange(id) {
      if (this.parentChecks[id]) {
        let res = []
        res = this.list.find(item => item.id == id).children
        if (res) {
          res = res.map(data => data.id)
        }
        this.childrenChecks[id] = res
      } else {
        this.childrenChecks[id] = []
      }
    },
    submit() {
      this.postForm.menuIds = this.combineMenuId()
      let params = Object.assign({}, this.postForm)
      delete params.createTime
      delete params.menuTree
      this.$refs['postForm'].validate((valid) => {
        if (valid) {
          roleSave(params, this.$route.query.id).then((res) => {
            // this.$notify({
            //   title: '成功',
            //   message: `${this.$route.query.id ? '编辑' : '添加'}成功`,
            //   type: 'success',
            //   duration: 2000
            // })

            this.$message({
              message: `${this.$route.query.id ? '编辑' : '添加'}成功`,
              type: 'success'
            });
            this.$router.go(-1)
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.shopListSave {
  padding: 40px 45px 20px 50px;
}
</style>